<template>
  <div class="_mbbox boxgap nbox1" :class="props.cp == true ? '' : 'cpmode'">
    <div class="nbox3 bg5">X期前指的是上次登场时间，点击头像可跳转到该赛季会战作业。</div>
    <van-pagination v-model="data.page" @change="set.pages" :page-count="data.maxpage" />
    <div class="olistgap">
      <div
        class="olistbox"
        :class="props.cp == true ? '' : 'olistboxcp'"
        v-for="item in data.list2"
      >
        <div class="c1">{{ item.name }} S{{ item.season }}</div>
        <div class="_bossgap">
          <template v-for="item2 in item.data">
            <div class="_bossbox" @click="set.click(item.season, item2.boss, item2.em)">
              <img
                style="margin-bottom: 15px; height: 100%; z-index: 99"
                :src="`${cfg.cdn2}?file=${cfg.bossnamelist?.[item2.boss]?.icon}&h=50`"
              />
              <div class="zy_em" style="top: 64px; left: 0px">
                <img height="15" :src="set.img[item2.em]" />
              </div>
              <div style="text-align: center" class="c4">
                <template v-if="item2.ss == 0">首次<br />登场</template>
                <template v-else>(S{{ item2.ys }}) {{ item2.ss }}期前</template>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <van-pagination v-model="data.page" @change="set.pages" :page-count="data.maxpage" />
  </div>
</template>
<style scoped>
.olistgap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: 8px;
  container-type: inline-size;
}
._bossbox {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--bg5);
  border-radius: 0.3em;
  padding: 8px;
  cursor: pointer;
  height: 135px;
  font-size: 13px;
  gap: 8px;
  position: relative;
}

.olistbox {
  background: var(--bg5);
  padding: 12px;
  padding-left: 36px;
  padding-right: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 195px;
}
._bossgap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  align-items: baseline;
  gap: 8px;
  width: 100%;
}
@container (max-width: 800px) {
  .olistbox {
    padding: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@container (max-width: 720px) {
  ._bossgap {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    gap: 12px;
  }
}
@container (max-width: 500px) {
  .olistbox {
    padding: 6px;
    gap: 6px;
  }
  ._bossgap {
    gap: 4px;
  }
  .olistgap {
    gap: 4px;
  }
}
@media (max-width: 428px) {
  .olistgap {
    grid-template-columns: repeat(1, minmax(0px, 1fr));
  }
}
</style>
<script>
import { getbossv2 } from "@/cfg/function.js";
import { cfg } from "@/cfg/cfg.js";
import img_fire from "@/assets/img/火属性.png";
import img_water from "@/assets/img/水属性.png";
import img_land from "@/assets/img/土属性.png";
import img_light from "@/assets/img/光属性.png";
import img_dark from "@/assets/img/暗属性.png";
import img_void from "@/assets/img/虚属性.png";

export default {
  props: {
    cp: {
      type: Boolean,
      required: false,
    },
  },
  emits: ["load_zy"],
  setup(props, { emit }) {
    const set = {
      img: {
        火: img_fire,
        水: img_water,
        土: img_land,
        光: img_light,
        暗: img_dark,
        虚: img_void,
      },
      click: async (season, boss, em) => {
        try {
          if (props.cp == true) {
            emit("load_zy", {
              season: season,
              boss: boss,
              em: em,
            });
          } else {
            //路由新窗口跳转
            const route = cfg.router.resolve({
              path: `/gt/zy-raids`,
              query: {
                share: "olist",
                s: season,
                boss: boss,
                em: em,
              },
            }); // 解析路由
            window.open(route.href, "_blank");
          }
        } catch (error) {
          alert(error);
        }
      },
      get_raids: async () => {
        try {
          const back = await cfg.mget({
            url: `${cfg.url2}api/raids_zy`,
            query: {
              time: 23345632,
              type: "olist",
            },
          });
          if (back.code != 0) {
            throw { code: 1, message: back.msg };
          }
          let bosscache = {};
          let bosslist = [];
          for (let i = 0; i < back.data.length; i++) {
            const item = back.data[i];
            const arr2 = item.boss;
            let bosslist_s = [];
            for (let j = 0; j < arr2.length; j++) {
              const boss = arr2[j];
              const bname = boss.name;

              let ss = 0;
              let ys = 0;
              if (bosscache[bname] == null) {
                bosscache[bname] = {
                  season: item.season,
                  em: boss.element,
                };
              } else {
                ys = bosscache[bname].season;
                ss = item.season - parseInt(bosscache[bname]?.season ?? 0);
                bosscache[bname] = {
                  season: item.season,
                  em: boss.element,
                };
              }
              bosslist_s.push({
                boss: boss.name,
                em: boss.element,
                ss: ss,
                ys: ys,
              });
            }
            bosslist.push({
              name: item.name,
              season: item.season,
              data: bosslist_s,
            });
          }
          data.bcache = bosscache;
          data.list = bosslist;
          data.list.reverse();
        } catch (error) {
          cfg.alert3({
            message: error.message,
            closeOnClickOverlay: true,
          });
        }
      },
      pages: (page) => {
        try {
          setTimeout(() => {
            const limit = data.limit;
            data.maxlimit = data.list?.length ?? 0;
            const d = data.list;
            const start = (page - 1) * limit;
            const end = start + limit;
            data.list2 = d.slice(start, end);
            data.maxpage = Math.ceil(data.maxlimit / limit);
          }, 1);
        } catch (error) {
          cfg.alert3({
            message: error.message,
            closeOnClickOverlay: true,
          });
        }
      },
    };
    let data = reactive({
      bcache: {},
      list: {},
      list2: [],
      page: 1,
      limit: 16,
      maxpage: 0,
      maxlimit: 0,
    });

    onMounted(async () => {
      await getbossv2();
      await set.get_raids();
      set.pages(data.page);
    });
    return { props, data, cfg, set };
  },
};
</script>
